import React, { Component } from 'react'


import { 
  Content,
  QuestionWrapper,
  ReplyWrapper,
  QuestionList,
  QuestionLayout,
  CommentWrapper
} from '../style'

import { List, InputItem, Modal} from 'antd-mobile';
import { Icon,message } from 'antd'
import { createForm } from 'rc-form';

class BBS extends Component {
  constructor(props) {
    super(props)
    this.state = {
      question: '',
      page: 1,
      pageSize: 15,
      reply: {
        replyName: '',
        replyId: '',
        toId: ''
      },
      replyContent: '',
      showAll: [],
      showInput: false,
      type: 'question',
      showImg: false
    }
  }

  // 提交提问
  submitBBS() {
    debugger
    if(!this.state.question) {
      message.error('内容不能为空！');
      return;
    }
    let type = this.state.type
    switch(type) {
      case 'question': 
        this.renderQuestion()
        break;
      case 'reply':
        this.saveReplyQuestion()
        break;
      case 'bbs':
        this.saveReplyQuestion()
      default:
        return 
    }
  }

  renderQuestion() {
    let obj = {}
    if(this.props.video.get('type') === 'JoyActivity') {
      obj.actId = this.props.video.get('actId')
    }else {
      obj.videoId = this.props.video.get('videoId')
    }
    obj.content = this.state.question
    this.props.addComment(obj)

    let temp = {}
    temp.page = this.state.page
    temp.pageSize = this.state.pageSize
    if(this.props.video.get('type') === 'JoyActivity') {
      temp.actId = this.props.video.get('actId')
    }else {
      temp.videoId = this.props.video.get('videoId')
    }
    this.setState({
      showInput: false
    })
    setTimeout(()=> {
      this.props.getComment(temp)
    }, 200)
  }

  // 显示回答条数
  renderReplyCount(item) {
    let arr = []
    if(!this.isShow(item)) {
      item.get('replys').map((comment, idx) => {
        if(idx<3) {
          arr.push(
            <div className="child-comment" key={comment.get('id')}>
              <div>
                <p>{comment.get('personName')} {comment.get('replyTo') ? <span><span style={{color: '#8BCA34'}}>@ </span>{comment.get('replyToName')}</span> : ''} : <span style={{fontWeight: 'normal', wordBreak: 'break-all', wordWrap: 'break-word', overflow: 'hidden'}}>{comment.get('content')}</span></p>
                <p style={{fontSize: '0.75rem'}}>{this.renderTime(comment.get('createTime'))} <a style={{color: comment.get('id') === this.state.reply.toId ? '' : '#333', marginLeft: '10px'}} onClick={this.replyTo.bind(this, comment, item.get('id'))}><Icon type="message" /></a></p>
              </div>
            </div>
          )
        }
      })
    }else {
      item.get('replys').map(comment => {
        arr.push(
          <div className="child-comment" key={comment.get('id')}>
            <div>
              <p>{comment.get('personName')} {comment.get('replyTo') ? <span><span style={{color: '#8BCA34'}}>@ </span>{comment.get('replyToName')}</span> : ''} : <span style={{fontWeight: 'normal', wordBreak: 'break-all', wordWrap: 'break-word', overflow: 'hidden'}}>{comment.get('content')}</span></p>
              <p style={{fontSize: '0.75rem'}}>{this.renderTime(comment.get('createTime'))} <a style={{color: comment.get('id') === this.state.reply.toId ? '' : '#333', marginLeft: '10px'}} onClick={this.replyTo.bind(this, comment, item.get('id'))}><Icon type="message" /></a></p>
            </div>
          </div>
        )
      })
    }
    return arr
  }

  // 时间格式
  renderTime(time) {
    let t = new Date(time);
    let m = t.getMonth() + 1;
    let d = t.getDate() + 1;
    let h = t.getHours();
    let mm = t.getMinutes()
    return m + '月' + d + '日 ' + h + ':' + mm
  }

  // 回复
  replyQuestion(v) {
    let obj = this.state.reply
    obj.replyName =  v.get('personName')
    obj.replyId = v.get('id')
    obj.toId = ''
    this.setState({
      reply: obj,
      showInput: true,
      type: 'bbs',
      question: ''
    }, ()=> this.inputRef.focus())
  }

  // 回复回答
  replyTo(v, id) {
    let obj = this.state.reply
    obj.replyId = id
    obj.replyName =  v.get('personName')
    obj.toId = v.get('id')
    this.setState({
      reply: obj,
      question: '',
      showInput: true,
      type: 'reply'
    }, ()=> this.inputRef.focus())
  }

  // 提交回复
  saveReplyQuestion() {
    this.props.reply({
      content: this.state.question,
      issueId: this.state.reply.replyId,
      to: this.state.reply.toId
    })

    setTimeout(()=> {
      let obj = {
        page: this.state.page,
        pageSize: this.state.pageSize
      }
      this.props.video.get('type') === 'JoyActivity' ? obj.actId = this.props.video.get('actId') : obj.videoId = this.props.video.get('videoId')
      this.props.getComment(obj)
      let re = this.state.reply
      re.replyName = ''
      this.setState({
        reply: re,
        question: '',
        showInput: false
      })
    },300)
  }
  
  // 收起
  showClose(item) {
    let obj = []
    this.state.showAll.map(it => {
      if(it !== item.get('id')) {
        obj.push(it)
      }
    })
    let re = this.state.reply
    re.replyName = ''
    this.setState({
      showAll: obj,
      reply: re
    })
  }

  // 回复某一个用户
  changeItem(item) {
    let obj = this.state.showAll
    obj.push(item.get('id'))
    this.setState({
      showAll: obj
    })
  }

  // 判断是否显示
  isShow(item) {
    let show = false
    if(item.get('replyNum')>3) {
      this.state.showAll.map(obj => {
        if(obj === item.get('id')) {
          show = true
        }
      })
    }else {
      show = true
    }
    return show
  }

  blur(str) {
    if(!str) {
      this.setState({
        showInput: false
      })
    }
  }

  render() {
    const { getFieldProps } = this.props.form;
    return (<QuestionWrapper>
            <Content>
              <QuestionList>
                {
                   this.props.comment.get('total') > 0 ? this.props.comment.get('data').map(item => {
                    return (
                      <QuestionLayout key={item.get('id')}>
                        <img className="avatar" style={{width: '40px', height: '40px'}} src={item.get('photo')} />
                        <CommentWrapper>
                          <p>{item.get('personName')}</p>
                          <p className="time">{this.renderTime(item.get('createTime'))}</p>
                          <p className="content">
                            <span style={{wordBreak: 'break-all', wordWrap: 'break-word', overflow: 'hidden'}}>{item.get('content')}</span>
                            <span style={{color: '#ccc', fontSize: '1rem', float: 'right'}} onClick={this.replyQuestion.bind(this, item)}><Icon style={{marginRight: '1rem'}} type="message" /></span>
                          </p>
                          {
                            this.renderReplyCount(item)
                          }
                          {
                            item.get('replyNum') > 3 ? <div className="reply-btn">
                              <span>共{item.get('replyNum')}条回复</span>
                              {
                                this.isShow(item) ? <a style={{marginLeft: '20px'}} onClick={this.showClose.bind(this, item)}>收起</a> : <a style={{marginLeft: '20px'}} onClick={this.changeItem.bind(this, item)}>点击查看</a>
                              }
                            </div> : ''
                          }
                        </CommentWrapper>
                      </QuestionLayout>
                    )
                  }): <div style={{marginTop: '20px'}} onClick={() => this.setState({showInput: true, type: 'question', reply: {}, qustion: ''}, ()=> this.inputRef.focus())}>
                    <p style={{textAlign: 'center'}}><a>暂无评论,点击开始评论吧</a></p>
                  </div>
                }
              </QuestionList>
            </Content>
            {
              this.state.showInput ? '' : <div style={{position: 'fixed', right: '20px', bottom: '20px',width: '54px', fontSize: '24px' }}>
                <img src={require('../showImg.png')} style={{marginRight: '6px', width: '24px',position: 'relative', top: '2px', height: '21px'}} onClick={()=> this.setState({showImg: true})} />
                <Icon  type="plus-circle" onClick={()=> this.setState({showInput: true, type: 'question', reply: {}, qustion: ''}, ()=> this.inputRef.focus())} /></div>
            }
              <Modal
              popup
              visible={this.state.showInput}
              onClose={()=> this.setState({showInput: false})}
              animationType="slide-up"
            >
               <List style={{position: 'fixed', top: '0', width: '100%'}}>
                <InputItem
                  {...getFieldProps('reply')}
                  extra="发送"
                  placeholder={this.state.reply.replyName ? ('@' + this.state.reply.replyName) : '请输入你想发表的内容'}
                  value={this.state.question}
                  onChange={(val) => this.setState({question: val})}
                  ref={el => this.inputRef = el}
                  onVirtualKeyboardConfirm={this.submitBBS.bind(this)}
                  clear={true}
                  editable={true}
                  onExtraClick={this.submitBBS.bind(this)}
                  autoAdjustHeight={true}
                />
              </List> 
             </Modal>
             <Modal
              popup
              visible={this.state.showImg}
              onClose={()=> this.setState({showImg: false})}
              animationType="slide-up"
            >
              {
                this.props.liveImg ? <div style={{ position: 'fixed', top: '30%'}}><img style={{maxWidth: '90%'}} src={this.props.liveImg.get('url')}/></div> : ''
              }
              
             </Modal>
          </QuestionWrapper>)
  }
}

const BBSWrapper = createForm()(BBS);

export default BBSWrapper